//售后单进度条
import React from 'react'
import { Button, Space, Steps, Card, Typography, Modal, Form, InputNumber, Input, message, Timeline, Row, Col } from "antd";
import TheButton from '@/components/TheButton'
import '../../orderList/style/style.scss'
import { refundConfirm, refundRefuse } from '@/request/callOrder/afterSaleOrder'
import ServeTimeLineModal from '../../orderList/components/serveTimeLine'

const { Paragraph } = Typography;
const { Step } = Steps;
const { TextArea } = Input

export default class AfterSaleDetails extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      info: props.info, //订单详情数据
      currentValue: 2, //当前进度值
      stepParams: [], //step 文案
      isNegotiateModal: false,//协商历史弹窗
      isRejectRefundModal: false,//平台拒绝退款弹窗
      rejectRefundBtnLoading: false,//平台拒绝退款loading
      submitRefundLoading: false, //同意退款按钮loading
      rejectRefundLoading: false, //拒绝退款按钮loading
      salesReturnId: '',// 售后订单id
    }
  }
  async componentDidMount() {
    await this.getData()
  }
  // 数据处理
  getData = async () => {
    let { info } = this.props
    if (info) {
      this.setState({ info, salesReturnId: info.salesReturnId }, () => {
        if (info.refundType === '1') {
          this.getRefundStep(info)
        }
        if (info.refundType === '0') {
          this.getChangeStep(info)
        }
      })
    }
  }
  // 售后订单为退款时  step进度数据处理 通过订单状态展示进度条内容
  getRefundStep = (params) => {
    let { submitRefundLoading, rejectRefundBtnLoading } = this.state
    let currentValue = 0, stepParams = []
    switch (params.refundStatus) {
      case '1': //待平台处理
        currentValue = 1
        stepParams = [
          {
            title: '发起退款申请',
            description: params.refundApplyTime && <span>{params.refundApplyTime}</span>
          },
          {
            title: '待平台处理',
            description:
              <Space size={10}  >
                <TheButton haspermi={['call:afterSaleOrder:refund']} type="primary" onClick={() => { this.submitRefund(params.salesReturnId) }} loading={submitRefundLoading}>同意</TheButton>
                <TheButton haspermi={['call:afterSaleOrder:noRefund']} type="danger" onClick={() => { this.setState({ isRejectRefundModal: true }) }} >拒绝</TheButton>
                <TheButton haspermi={['call:afterSaleOrder:record']} type="default" onClick={() => { this.setState({ isNegotiateModal: true }) }}>查看协商历史</TheButton>
              </Space>
          },
          {
            title: '完成',
            description: ''
          }
        ]
        break
      case '2': //平台拒绝退款,等待买家处理
        currentValue = 2
        stepParams = [
          {
            title: '发起退款申请',
            description: params.refundApplyTime && <span>{params.refundApplyTime}</span>
          },
          {
            title: '平台已同意',
            description: params.refundSucceedTime && <span>{params.refundSucceedTime}</span>
          },
          {
            title: '退款成功',
            description: <Space direction='vertical'>
              {params.refundSucceedTime && <span> {params.refundSucceedTime}</span>}
              <TheButton haspermi={['call:afterSaleOrder:record']} type="default" onClick={() => { this.setState({ isNegotiateModal: true }) }}>查看协商历史</TheButton>
            </Space>
          }
        ]
        break
      case '3'://平台拒绝退款,买家关闭售后申请
        currentValue = 2
        stepParams = [
          {
            title: '发起退款申请',
            description: params.refundApplyTime && <span>{params.refundApplyTime}</span>
          },
          {
            title: '平台已驳回',
            description: params.refundFailTime && <span>{params.refundFailTime}</span>
          },
          {
            title: '待买家处理',
            description: <TheButton haspermi={['call:afterSaleOrder:record']} type="default" onClick={() => { this.setState({ isNegotiateModal: true }) }}>查看协商历史</TheButton>
          },
          {
            title: '完成',
            description: ''
          }
        ]
        break
      case '0':
        currentValue = 3
        stepParams = [
          {
            title: '发起退款申请',
            description: <span>{params.createTime}</span>
          },
          {
            title: '平台已驳回',
            description: params.refundFailTime && <span>{params.refundFailTime}</span>
          },
          {
            title: '买家关闭申请',
            description: params.refundFailTime && <span>{params.refundCloseTime}</span>
          },
          {
            title: '完成',
            description: <Space direction='vertical'>
              {params.refundFailTime && <span>{params.refundCloseTime}</span>}
              <TheButton haspermi={['call:afterSaleOrder:record']} type="default" onClick={() => { this.setState({ isNegotiateModal: true }) }}>查看协商历史</TheButton>
            </Space>
          }
        ]
        break
    }
    this.setState({
      currentValue,
      stepParams
    })
  }
  // 售后订单为变更状态时  step进度数据处理 通过订单状态展示进度条内容
  getChangeStep = (params) => {
    let currentValue = 0, stepParams = []
    switch (params.changeStatus) {
      case '1': //待处理变更状态
        currentValue = 1
        stepParams = [
          {
            title: '发起变更申请',
            description: <span>{params.createTime}</span>
          },
          {
            title: '待处理',
            description: <TheButton haspermi={['call:afterSaleOrder:record']} type="default" onClick={() => { this.setState({ isNegotiateModal: true }) }}>查看协商历史</TheButton>
          },
          {
            title: '完成',
            description: ''
          }
        ]
        break
      case '0': //买家关闭变更申请
        currentValue = 2
        stepParams = [
          {
            title: '发起变更申请',
            description: <span>{params.createTime}</span>
          },
          {
            title: '已关闭',
            description: <Space direction='vertical'>
              <span>{params.createTime}</span>
              <TheButton haspermi={['call:afterSaleOrder:record']} type="default" onClick={() => { this.setState({ isNegotiateModal: true }) }}>查看协商历史</TheButton>
            </Space>
          }
        ]
        break
      case '2'://变更申请成功
        currentValue = 2
        stepParams = [
          {
            title: '发起变更申请',
            description: <span>{params.createTime}</span>
          },
          {
            title: '变更成功',
            description: <TheButton haspermi={['call:afterSaleOrder:record']} type="default" onClick={() => { this.setState({ isNegotiateModal: true }) }}>查看协商历史</TheButton>
          }
        ]
        break
    }
    this.setState({
      currentValue,
      stepParams
    })
  }
  //待处理平台同意退款
  submitRefund = async (salesReturnId) => {
    this.setState({ submitRefundLoading: true })
    let res = await refundConfirm(salesReturnId)
    if (res.code === 0) {
      message.success('退款成功！')
      this.props.getRequest(salesReturnId)
      // window.location.reload() //退款成功后刷新下页面
    }
    this.setState({ submitRefundLoading: false })
  }
  //待处理平台拒绝退款
  submitRejectRefund = async (value) => {
    let { salesReturnId } = this.state
    this.setState({ rejectRefundBtnLoading: true })
    let res = await refundRefuse({ ...value, salesReturnId })
    if (res.code === 0) {
      message.success('拒绝退款成功！')
      this.cancelRejectRefund() //拒绝退款成功后刷新下页面
      this.props.getRequest(salesReturnId)
    }
    this.setState({ rejectRefundBtnLoading: false })
  }
  //取消拒绝退款
  cancelRejectRefund = () => {
    this.setState({ isRejectRefundModal: false })
    this.formRef.resetFields()
  }
  //操作关闭服务信息查看图片视频弹窗
  getModalOpen = (value) => {
    this.setState({ isServerInfoModal: value })
  }
  // 操作关闭服务信息弹窗
  getServeTimeLineModalOpen = (value) => {
    this.setState({ isNegotiateModal: value })
  }

  render() {
    const { info, currentValue, stepParams, isNegotiateModal, isRejectRefundModal, rejectRefundBtnLoading } = this.state
    return (
      <div>
        <Paragraph>
          <blockquote>
            <span>售后单编号：{info.salesReturnId}</span>
          </blockquote>
        </Paragraph>
        <Card>
          <Steps
            progressDot
            current={currentValue}
          >
            {
              stepParams.map((item, index) => {
                return <Step title={item.title} subTitle={item.description} key={index} />
              })
            }
          </Steps>
        </Card>
        {
          //查看服务信息详情
          isNegotiateModal && <ServeTimeLineModal createType={'1'} history={this.props.history} orderId={info.salesReturnId} isModalOpen={isNegotiateModal} getModalOpen={this.getServeTimeLineModalOpen}></ServeTimeLineModal>
        }
        <Modal width={'25%'} title="拒绝退款" open={isRejectRefundModal} footer={null} destroyOnClose onCancel={this.cancelRejectRefund} >
          <Form ref={(ref) => this.formRef = ref} onFinish={this.submitRejectRefund}>
            <Form.Item name="refuseReason" rules={[{ required: true, message: '请输入拒绝原因' }]} >
              <TextArea maxLength={200} showCount placeholder="请输入拒绝原因" autoSize={{ minRows: 4, maxRows: 6 }} />
            </Form.Item>
            <Form.Item>
              <div style={{ display: 'flex', justifyContent: 'flex-end', margin: '20px 0 -20px' }}>
                <Space>
                  <Button onClick={this.cancelRejectRefund}>取消</Button>
                  <Button loading={rejectRefundBtnLoading} htmlType="submit">拒绝退款</Button>
                </Space>
              </div>
            </Form.Item>
          </Form>
        </Modal>
      </div>
    )
  }
}
